<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/admin/blogs' }">博客管理</el-breadcrumb-item>
      <el-breadcrumb-item>撰写博客</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="hover">
      <el-form style="text-align: left" label-width="80px" ref="formRef" :model="formData" :rules="formRules"
               class="publish_form">
        <el-form-item label="标题" prop="type">
          <el-input placeholder="请输入标题" v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item prop="type">
          <mavon-editor ref="mdRef"
                        v-model="formData.content"
                        @imgAdd="imgAdd"
                        style="margin: 10px auto;min-height: 70vh"/>
        </el-form-item>
        <el-form-item label="分类" prop="type">
          <el-select size="small" v-model="formData.typeId" placeholder="请选择分类">
            <el-option v-for="item in typeList" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
          <el-button size="small" @click="isShowTypePop=true">+ 新建分类</el-button>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-card shadow="never" style="height: 120px; overflow: auto">
            <el-checkbox-group v-model="selectTagIds">
              <el-checkbox v-for="item in tagList" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
            <el-button size="mini" @click="isShowTagPop=true">+ 新建标签</el-button>
          </el-card>
        </el-form-item>
        <el-form-item label="类型" prop="flag">
          <el-select size="small" v-model="formData.flag">
            <el-option
                v-for="item in flagList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面">
          <SimpleUpload :info="imageInfo" ref="uploadRef" @complete="handleUploadComplete"></SimpleUpload>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button style="border-radius: 20px" type="danger" @click="handleSubmit">发布文章</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <AEditTypeDialog :is-show.sync="isShowTypePop" :is-edit="false" :info="editTypeInfo"
                     @complete="getTypeList"></AEditTypeDialog>
    <AEditTagDialog :is-show.sync="isShowTagPop" :is-edit="false" :info="editTagInfo"
                    @complete="getTagList"></AEditTagDialog>
  </div>

</template>

<script>
import {
  reqAllTagList,
  reqAllTypeList,
  reqAddBlog,
  reqBlogDetail,
  reqEditBlog
} from '../../api/adminApi'
import SimpleUpload from '@/components/SimpleUpload.vue'
import AEditBlogTypeDialog from '@/views/admin/dialog/AEditBlogTypeDialog.vue'
import AEditTypeDialog from '@/views/admin/dialog/AEditTypeDialog.vue'
import AEditTagDialog from '@/views/admin/dialog/AEditTagDialog.vue'
import { reqUpload } from '@/api/uploadApi'

const defFormData = () => {
  return {
    content: "",
    title: "",
    typeId: '',
    tagIds: [],
    firstPicture: "",
    flag: '原创'
  }
}
export default {
  components: { AEditTagDialog, AEditTypeDialog, AEditBlogTypeDialog, SimpleUpload },
  data() {
    return {
      id: 0,
      isEdit: false,
      isShowTypePop: false,
      isShowTagPop: false,
      flagList: [
        { value: "原创", label: "原创" },
        { value: "转载", label: "转载" },
        { value: "翻译", label: "翻译" }
      ],
      editTypeInfo:{},
      editTagInfo:{},
      imageInfo: {},
      typeList: [],
      tagList: [],
      selectTagIds: [],
      formData: defFormData(),
      formRules: {
        typeId: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ],
        tagIds: [
          { required: true, message: '请选择至少一种标签', trigger: 'blur' }
        ],
        flag: [
          { required: true, message: '请选择文章类型', trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    if (this.$route.path == '/admin/blog/edit') {
      this.isEdit = true
      this.id = this.$route.query.id
      this.formData.id = this.id
      this.getInfo()
    }
    this.getTypeList()
    this.getTagList()
  },
  methods: {
    refresh() {

    },
    getInfo() {
      reqBlogDetail(this.id).then(data => {
        this.formData = data
        this.selectTagIds = data.tagList.map(it => it.id)
        this.imageInfo.imageList = [data.firstPicture]
        this.$refs.uploadRef.refresh()
      })
    },
    // 获取博客类型列表
    getTypeList() {
      reqAllTypeList().then(data => {
        this.typeList = data
      })
    },
    // 获取博客标签列表
    getTagList() {
      reqAllTagList().then(data => {
        this.tagList = data
      })
    },
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (!valid) return;
        this.formData.tagIds = this.selectTagIds
        this.formData.html=this.$refs.mdRef.d_render
        if (this.isEdit) {
          this.handleEdit()
        } else {
          this.handleAdd()
        }
      })
    },
    // 发布项目
    handleAdd() {
      reqAddBlog(this.formData).then(data => {
        this.$message.success('发布成功！')
        //this.$router.back()
        this.formData = defFormData()
        this.selectTagIds = []
      })
    },
    // 更新项目
    handleEdit() {
      reqEditBlog(this.formData).then(data => {
        this.$message.success('更新成功！')
        this.$router.back()
      })
    },
    // 将图片上传到服务器，返回的地址替换到md中
    async imgAdd(pos, file) {
      const form = new FormData()
      form.append('file', file)
      reqUpload(form).then(data => {
        this.$refs.mdRef.$img2Url(pos, data.url)
      })
    },
    handleUploadComplete(value) {
      if (value && value.length) {
        this.formData.firstPicture = value[0]
      } else {
        this.formData.firstPicture = ''
      }
    },
  }
}
</script>

<style scoped lang="less">
.el-form /deep/ .el-form-item__content {
  line-height: 23px;
}

.el-card /deep/ .el-card__body {
  padding: 10px;
}

</style>
